<template>
    <view class="content">
        <view style="height: 20rpx;"></view>
        <view class="search_form">
            <u-search placeholder="搜索内容" :show-action="false" v-model="keyword" bg-color="#fff" @search="doSearch"></u-search>
        </view>
        <view class="goods_ctx">
            <scroll-view class="leftx" scroll-y>
                <view class="item" :class="{'act': cateId == item.id}" v-for="(item,index) in cate" :key="index" 
                    @click="chooseCate(item)">{{item.name}}</view>
            </scroll-view>
            <scroll-view class="rightx" scroll-y @scrolltolower="getList">
                <view class="item" v-for="(item,index) in list" :key="index" @click.stop="goDetail(item.id)">
                    <image :src="item.image_uri" class="pic"></image>
                    <view class="goods_msg">
                        <view class="titt u-line-1">{{item.goods_name}}</view>
                        <view class="supx u-line-2">{{item.supplier_name}}</view>
                        <view class="bolx">
                            <view class="money">￥<text class="nums">{{item.sale_price}}</text></view>
                            <image src="../../static/icon/adrx.png" class="add"></image>
                        </view>
                    </view>
                </view>
                <view style="height: 94rpx;padding-top: 30rpx;">
                    <u-loadmore :status="status" v-if="status != 'loadmore'" />
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '',
                pId: '', //一级分类id
                cateId: '', //二级分类id
                supplierId: '', //供应商id
                cate: [],//分类列表
                list: [],
                page: 1,
                status: 'loadmore', //是否显示没有更多了
                title: '',
            };
        },
        onLoad(option) {
            if (option.title) {
                uni.setNavigationBarTitle({
                	title: option.title
                })
            }
            this.pId = option.pId
            this.getCate()
        },
        methods: {
            goDetail(id) {
                this.$gTo(`/pages/shop/goods?id=${id}`)
            },
            
            // 搜索
            doSearch() {
                this.cateId = ''
                this.getCate()
            },
            
            // 切换分类
            chooseCate(item) {
                if (this.cateId == item.id) return
                this.cateId = item.id
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            // 获取二级分类
            getCate() {
            	this.$ajax('category', {
            		userToken: this.$getSync('userToken'),
            		parent_id: this.pId, //上级id
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.cate = ret.data.data
                        if (this.cate && this.cate[0] && this.cate[0].id) {
                            this.cateId = this.cate[0].id
                            // this.cate.unshift({
                            //     name: '全部',
                            //     id: 0
                            // })
                            this.page = 1
                            this.list = []
                            this.status = 'loadmore'
                            this.getList()
                        } else {
                            this.page = 1
                            this.list = []
                            this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 获取商品列表
            getList() {
                if (this.status == 'nomore') return;
                this.status = 'loading';
            	this.$ajax('goods', {
            		userToken: this.$getSync('userToken'),
            		goodsName: this.keyword, //商品名称
                    page: this.page,
                    limit: 10,
                    category_id: this.cateId, //分类id
                    supplier_id: '', //供应商id
            	}).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.goods && ret.data.goods.length > 0) {
                        	this.list = this.list.concat(ret.data.goods);
                        	this.page++;
                        	this.status = 'loadmore'
                        } else {
                        	this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style scoped lang="scss">
    .content {
        height: 100vh;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
    }

    .search_form {
        width: 710rpx;
        margin: 0 auto 20rpx;
        height: 72rpx;
        // border-radius: 100px;
        // background: #fff;
        // display: flex;
        // align-items: center;
        // padding: 0 28rpx;

        // .iptx {
        //     margin-left: 22rpx;
        //     font-size: 26rpx;
        // }
    }

    .goods_ctx {
        flex: 1;
        height: 0;
        display: flex;

        .leftx {
            width: 146rpx;
            height: 100%;
            background: #fff;
            margin-right: 20rpx;

            .item {
                width: 100%;
                text-align: center;
                font-size: 25rpx;
                color: #000000;
                height: 94rpx;
                line-height: 94rpx;

                &.act {
                    background: #f5f5f5;
                    color: #00734c;
                    font-weight: 700;
                }
            }
        }

        .rightx {
            flex: 1;
            width: 0;
            margin-right: 20rpx;
            background: #fff;
            padding: 30rpx;

            .item {
                display: flex;
                margin-bottom: 30rpx;

                .pic {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                    border: 1rpx solid #e3e3e3;
                    margin-right: 24rpx;
                }

                .goods_msg {
                    flex: 1;
                    width: 0;

                    .titt {
                        font-size: 28rpx;
                        color: #000;
                        height: 36rpx;
                        line-height: 36rpx;
                    }

                    .supx {
                        font-size: 24rpx;
                        color: #666666;
                        height: 80rpx;
                        line-height: 40rpx;
                    }

                    .bolx {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .money {
                            font-size: 22rpx;
                            color: #f62a2a;

                            .nums {
                                font-size: 34rpx;
                                font-weight: 700;
                            }
                        }

                        .add {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }
                }

            }
        }
    }
</style>